<template>
    <div>
        <el-container>
            <el-header>
                <div style="margin-top: 10px;">
                    <el-row :gutter="10">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6">
                            <div class="grid-content bg-purple">
                            </div>
                        </el-col>
                        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="12">
                            <div class="grid-content bg-purple-content">

                                <ul>
                                    <li>首页</li>
                                    <li>国内疫情</li>
                                    <li>国外疫情
                                    </li>
                                </ul>

                                <div style="width: 350px;float: left;line-height: 36px;margin-left: 40px">
                                    <el-input placeholder="请输入相关内容" v-model="searchContent" @keyup.enter.native="search"
                                              class="input-with-select">
                                        <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
                                    </el-input>
                                </div>
                            </div>
                        </el-col>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6">
                            <div class="grid-content bg-purple-light">

                                <ul>
                                    <li @click="toLogin">登录</li>
                                    <li @click="toRegister">注册</li>
                                </ul>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div style="border-bottom-style: inset;margin-top: 8px"></div>
            </el-header>
            <el-main>

                <div style="width: 100%;height: 400px;">
                    <el-carousel :interval="4000" type="card" height="400px" indicator-position="none">
                        <el-carousel-item v-for="item in 6" :key="item">
                            <h3 class="medium"></h3>
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <!--国内 疫情-->
                <div style="margin-top: 20px;height: 100px">
                    <el-row>
                        <el-col :span="12">
                            <div>
                                <div style="float: left;font-size: 35px;font-weight: 700;margin-left: 200px;color: #10aeb5">
                                    国内疫情
                                </div>
                                <div style="float: left;font-size: 15px;margin-left: -100px;margin-top: 45px;color: #8c939d">
                                    实时更新
                                </div>
                            </div>

                        </el-col>

                    </el-row>
                </div>

                <div>

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div style="height: 60px;line-height: 60px;" align="center">
                                <span style="font-size: 25px">现存确诊人数  </span>
                                <span style="font-size: 30px;font-weight: 600">{{domesticDataList.currentConfirmedCount}}</span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div
                                    style="height: 60px;line-height: 60px" align="center">
                                <span style="font-size: 25px">累计确诊人数  </span>
                                <span style="font-size: 30px;font-weight: 600">{{domesticDataList.confirmedCount}}</span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div style="height: 60px;line-height: 60px" align="center">
                                <span style="font-size: 25px">累计死亡人数  </span>
                                <span style="font-size: 30px;font-weight: 600">{{domesticDataList.deadCount}}</span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div style="height: 60px;line-height: 60px" align="center">
                                <span style="font-size: 25px">新增境外输出  </span>
                                <span style="font-size: 30px;font-weight: 600">{{domesticDataList.suspectedIncr}}</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div style="border-bottom-style: inset;margin-top: 20px"></div>

                <!--国外疫情-->
                <div style="margin-top: 20px;height: 100px">
                    <el-row>
                        <el-col :span="12">
                            <div>
                                <div style="float: left;font-size: 35px;font-weight: 700;margin-left: 200px;color: #10aeb5">
                                    国外疫情
                                </div>
                                <div style="float: left;font-size: 15px;margin-left: -100px;margin-top: 45px;color: #8c939d">
                                    实时更新
                                </div>
                            </div>

                        </el-col>

                    </el-row>
                </div>

                <div>

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div style="height: 60px;line-height: 60px;" align="center">
                                <span style="font-size: 25px">现存确诊人数  </span>
                                <span style="font-size: 30px;font-weight: 600">{{foreignDataList.currentConfirmedCount}}</span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div
                                    style="height: 60px;line-height: 60px" align="center">
                                <span style="font-size: 25px">累计确诊人数  </span>
                                <span style="font-size: 30px;font-weight: 600">{{foreignDataList.confirmedCount}}</span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div style="height: 60px;line-height: 60px" align="center">
                                <span style="font-size: 25px">累计死亡人数  </span>
                                <span style="font-size: 30px;font-weight: 600">{{foreignDataList.deadCount}}</span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div style="height: 60px;line-height: 60px" align="center">
                                <span style="font-size: 25px">新增境外输出  </span>
                                <span style="font-size: 30px;font-weight: 600">{{foreignDataList.suspectedIncr}}</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div style="border-bottom-style: inset;margin-top: 20px"></div>


                <!--全球疫情-->
                <div style="margin-top: 20px;height: 100px">
                    <el-row>
                        <el-col :span="12">
                            <div>
                                <div style="float: left;font-size: 35px;font-weight: 700;margin-left: 200px;color: #10aeb5">
                                    全球疫情
                                </div>
                                <div style="float: left;font-size: 15px;margin-left: -100px;margin-top: 45px;color: #8c939d">
                                    实时更新
                                </div>
                            </div>

                        </el-col>

                    </el-row>
                </div>

                <div>

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div style="height: 60px;line-height: 60px;" align="center">
                                <span style="font-size: 25px">现存确诊人数  </span>
                                <span style="font-size: 30px;font-weight: 600">{{globalDataList.currentConfirmedCount}}</span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div
                                    style="height: 60px;line-height: 60px" align="center">
                                <span style="font-size: 25px">累计确诊人数  </span>
                                <span style="font-size: 30px;font-weight: 600">{{globalDataList.confirmedCount}}</span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div style="height: 60px;line-height: 60px" align="center">
                                <span style="font-size: 25px">累计死亡人数  </span>
                                <span style="font-size: 30px;font-weight: 600">{{globalDataList.deadCount}}</span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div style="height: 60px;line-height: 60px" align="center">
                                <span style="font-size: 25px">累计治愈人数  </span>
                                <span style="font-size: 30px;font-weight: 600">{{domesticDataList.curedCount}}</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div style="border-bottom-style: inset;margin-top: 20px"></div>

                <!--新闻列表-->
                <div style="margin-top: 20px;height: 100px">
                    <el-row>
                        <el-col :span="12">
                            <div>
                                <div style="float: left;font-size: 35px;font-weight: 700;margin-left: 200px;color: #2577e3">
                                    疫情热点
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div>
                                <div style="margin-top: 20px;float: right;margin-right: 300px" class="city_recommend">

                                    <ul>
                                        <li style="font-size: 20px">全国疫情城市</li>
                                        <li>北京市</li>
                                        <li>四川省</li>
                                        <li>广东省</li>
                                        <li>上海市</li>
                                        <li>黑龙江省</li>
                                    </ul>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div style="border-bottom-style: inset;margin-top: 8px"></div>


                <div style="background-color: pink ;width: 80%;margin: 10px auto">

                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName">
                        <el-table-column
                                label="时间" align="center"
                        >
                            <template slot-scope="scope">{{ scope.row.pubDateStr }}</template>
                        </el-table-column>

                        <el-table-column label="标题" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.title }}
                            </template>
                        </el-table-column>

                        <el-table-column label="主题" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.summary }}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="消息来源" align="center">
                            <template slot-scope="scope">{{ scope.row.infoSource }}</template>
                        </el-table-column>


                    </el-table>

                </div>


                <!--可视化-->
                <div style="margin-top: 20px;height: 100px">
                    <el-row>
                        <el-col :span="12">
                            <div>
                                <div style="float: left;font-size: 35px;font-weight: 700;margin-left: 200px;color: #2577e3">
                                    疫情视图
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div style="height: 500px;width: 80%;margin-left: 200px" id="main">


                </div>


            </el-main>
            <el-footer>

                <div style="height: 60px">
                    <el-row :gutter="10">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6">
                            <div class="grid-content footer-content" style="height: 100px">
                                <div style="float: right;margin-right: 5px">
                                    <div style="margin-right: 5px;font-size: 18px;cursor: pointer">
                                        xxx有限公司
                                    </div>
                                    <div style="font-size: 10px;margin-top: -20px">经营许可：L-HUN-100213</div>
                                </div>

                            </div>
                        </el-col>
                        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="12">
                            <div class="grid-content ">
                                <div style="height: 100px" class="footer-content">
                                    <ul>
                                        <li>积极防护</li>
                                        <li>保护自己</li>
                                        <li>戴口罩-勤洗手
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </el-col>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6">
                            <div class="grid-content footer-content">
                                <div style="height: 100px;line-height: 100px;color: white;font-size: 18px;cursor: pointer">

                                    帮助 举报 用户反馈
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    import moment from 'moment'
    import {situation_news} from "../../api/situation";
    import {domestic_data} from "../../api/domestic_data";
    import {foreign_data} from "../../api/foreign_data";
    import {global_data} from "../../api/global_data";

    let echarts = require('echarts/lib/echarts');
    // 引入饼状图组件
    require('echarts/lib/chart/pie');
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');

    export default {
        data() {
            return {
                tableData: [],
                currentPage: 1,
                searchContent: "",
                pageSize: 10,
                total: 0,
                loading: false,
                domesticDataList: {},
                foreignDataList: {},
                globalDataList: {}

            };
        },

        created() {
            this.situationNewsList();
            this.domesticData();
            this.foreignData();
            this.globalData();
        },

        filters: {
            filterCtime(ctime) {
                if (ctime) {
                    return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
                } else {
                    return '暂无数据'
                }
            },
            filterShow(show) {
                if (show === 1) {
                    return '显示'
                } else {
                    return '不显示'
                }
            }
        },

        mounted() {
            this.initChart();
        },

        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },

            search() {
                this.situationNewsList();
            },
            initChart() {

                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: '国内外疫情视图',
                        subtext: '疫情视图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: 543, name: '国内人数'},
                                {value: 735, name: '国外人数'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            },


            toLogin() {
                this.$router.push({path: "/login"});
            },

            toRegister() {
                this.$router.push({path: "/register"});
            },
            situationNewsList() {
                this.loading = true;
                situation_news().then(res => {
                    if (res.status === 200) {
                        this.total = Number.parseInt(res.data.total);
                        this.tableData = res.data;
                        this.loading = false;
                    }

                })
            },
            domesticData() {
                domestic_data().then(res => {
                    if (res.status === 200) {
                        this.domesticDataList = res.data[0];
                    }
                })
            },
            foreignData() {
                foreign_data().then(res => {
                    if (res.status === 200) {
                        this.foreignDataList = res.data[0];
                    }
                })
            },

            globalData() {
                global_data().then(res => {
                    if (res.status === 200) {
                        this.globalDataList = res.data[0];
                    }
                })
            },

        }
    };
</script>

<style lang="less">

    .el-header, .el-footer {
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: white;
        color: #333;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }


    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: white;
    }

    .bg-purple-content {
        background: white;
    }

    .bg-purple-light {
        background: white;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .grid-footer {
        background-color: pink;
    }

    ul li {
        float: left;
        margin-left: 20px;
        line-height: 36px;
    }

    li:hover {
        color: orangered;
        cursor: pointer;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        //background-color: #99a9bf;
        background: url("../../assets/img/situation.png");
    }

    .el-carousel__item:nth-child(2n+1) {
        //background-color: #d3dce6;
        background: url("../../assets/img/situation-02.png");
    }

    .footer-content {
        background-color: #c4c9cd;
    }

    .footer-content ul li {
        line-height: 100px;
        margin-left: 150px;
        font-size: 30px;
        font-weight: 700;
        color: white;
    }

    .city_recommend ul li:hover {
        background: orangered;
        color: white;
    }
</style>
